<template>
	<view>
		<view class="main">
			<view class="main-box">
				<u--text color="#ededed" size="17" lineHeight="70" align="center" text="记账本"></u--text>
				<view class="pay-month">
					<text>本月支出:</text>
					<text class="month">{{ totalPayMoney }}</text>
				</view>
				<view class="income-month">
					<text>收入：{{ totalIncomeMoney }}</text>
					<text>结余： {{ surplusMoney.toFixed(2) }}元</text>
				</view>
			</view>
		</view>
		<view class="swith-tab">
			<u-tabs itemStyle=" height: 45px;" :inactiveStyle="{ color: '#303133' }" :activeStyle="{ color: '#FF9800' }"
				lineWidth="40" lineColor="#FF9800" :list="list" @click="click"></u-tabs>
		</view>
		<!-- 收入列表 -->
		<view class="info" v-show="isIncomeDisplay">
			<view v-if="this.income.length > 0">
				<u-collapse v-for="item in income" :key="item.id" class="info-item" @change="changeIncome(item)">
					<u-collapse-item :label="item.createTime" name="income" :title="item.title">
						<view class="detail">
							<text>姓名：{{ item.nickName }}</text>
							<text>金额：+{{ item.money }}元</text>
						</view>
						<view class="detail">
							<text>类型：{{ item.typeName }}</text>
							<text>支出方式：{{ item.paywayName }}</text>
							<view style="mrgin-top: 5px;">
								<text>备注：{{ item.notes }}</text>
							</view>
							<text class="detail-photo">
								<text>图片：</text>
								<img class="photo" :src="item.photo" alt="">
							</text>
						</view>
					</u-collapse-item>
				</u-collapse>
			</view>
			<view v-else>
				<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/car.png">
				</u-empty>
			</view>
		</view>

		<!-- 支出列表 -->
		<view v-show="isPayDisplay" class="info">
			<view v-if="this.pay.length > 0">
				<u-collapse v-for="item in pay" :key="item.id" class="info-item" @change="changePay(item)">
					<u-collapse-item :label="item.createTime" :title="item.title" name="pay">
						<view class="detail">
							<text>姓名：{{ item.nickName }}</text>
							<text>金额：-{{ item.money }}元</text>
						</view>
						<view class="detail">
							<text>类型：{{ item.typeName }}</text>
							<text>支出方式：{{ item.paywayName }}</text>
							<!-- <text>图片：{{ item.createTime }}</text> -->
							<view style="margin-top: 5px;">
								<text>备注：{{ item.notes }}</text>
							</view>
							<text class="detail-photo">
								<text>图片：</text>
								<img class="photo" :src="item.photo" alt="">
							</text>
						</view>
					</u-collapse-item>
				</u-collapse>
			</view>
			<view v-else>
				<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/car.png">
				</u-empty>
			</view>

		</view>
	</view>
</template>

<script>
import { payIncomeIndex, currentMonthTotalIncome, currentMonthTotalPay } from '../../api/index/index'
export default {
	components: {
	},
	data() {
		return {
			pay: [],
			totalIncomeMoney: 0,  // 本月总收入
			totalPayMoney: 0,     // 本月总支出
			isIncomeDisplay: true,
			isPayDisplay: false,
			income: [],
			user: {},
			param: {
				id: 2,
			},

			list: [
				{
					id: 1,
					name: '收入',
				},
				{
					id: 2,
					name: '支出'
				}]
		};
	},
	created() {
		this.user = JSON.parse(uni.getStorageSync('userinfo'))
		let param = {
			id: this.user.id
		}
		this.load(param);
		this.totalIncomeMonthMOney(param)
		this.totalPayMonthMOney(param)
	},
	onLoad() {
	},
	onShow() {
		// 
	},
	onHide() {
	},
	mounted() {
	},
	computed: {
		surplusMoney(){
			return this.totalIncomeMoney - this.totalPayMoney
		}
	},
	

	methods: {
		// 本月收入
		totalIncomeMonthMOney(param) {
			currentMonthTotalIncome(param).then(res => {
				console.log(res);
				if (res.code == 200) {
					// 统计本月收入金额
					this.totalIncomeMoney = res.data.reduce((sum, item) => (sum += item.money), 0).toFixed(2);
				}
			})
		},
		// 本月支出
		totalPayMonthMOney(param) {
			currentMonthTotalPay(param).then(res => {
				if (res.code == 200) {
					// 统计本月支出金额
					this.totalPayMoney = res.data.reduce((sum, item) => (sum += item.money), 0).toFixed(2);
				}

			})
		},
		load(param) {
			payIncomeIndex(param).then(res => {
				console.log(res);
				if (res.code == 200) {
					this.income = res.data.income
					this.pay = res.data.pay
				}
			})
		},
		open(e) {
			console.log('open', e)
		},
		change(e) {
			console.log('change', e)
		},
		changePay(item) {
			console.log(item);
		},
		changeIncome(item) {
			console.log(item);
		},
		click(item) {
			if (item.id == 1) {
				this.isIncomeDisplay = true
				this.isPayDisplay = false
			} else if (item.id == 2) {
				this.isIncomeDisplay = false
				this.isPayDisplay = true
			}
		},
	},
};
</script>

<style lang="scss" scoped>
page,
body {
	background-color: #fff;
}

.main {
	background-color: #FF9800;
}

.main-box {
	padding-bottom: 15px;
	display: flex;
	flex-direction: column;
}

.main-box text {
	color: #FFFDEF;
}

.info {
	margin: 0 0;
}

.pay-month {
	display: flex;
	flex-direction: column;
	text-indent: 2em;
}

.pay-month .month {
	margin: 5px 0;
	font-size: 24px;
}

.income-month {
	text-indent: 2em;
	display: flex;
}

.info-item {}

.swith-tab {
	background-color: #fafafa;
	// justify-content: center;
	display: flex;
	justify-content: center;
}

.detail {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.detail text {
	margin: 5px 0;
}

.detail text .photo {
	width: 95px;
	height: 100px;
}

.detail .detail-photo {
	margin: 10px 0;
}

.detail-photo text {
	vertical-align: top;
}
</style>